<template>
  <div class="bidding-item">
    <el-row class="bidding-title">
      <el-col :span="7"><div class="grid-content bg-purple">{{$t('bidding.name')}}</div></el-col>
      <el-col :span="2"><div class="">{{$t('bidding.type')}}</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light">{{$t('bidding.productName')}}</div></el-col>
      <el-col :span="5"><div class="grid-content bg-purple">{{$t('bidding.region')}}</div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light">{{$t('bidding.releaseTime')}}</div></el-col>
      <el-col :span="2"><div class="grid-content bg-purple">{{$t('bidding.collection')}}</div></el-col>
    </el-row>
    <div class="have-data" v-if="propsData.length !== 0">
      <div class="item-detail" v-for="(item, index) in propsData">
        <el-row>
          <el-col :span="7">
            <el-tooltip class="item" effect="light" :content="item.title" placement="right-end">
              <div class="item-name" @click="sendDetailName(index)">{{item.title}}</div>
            </el-tooltip>
          </el-col>
          <el-col :span="2"><div class="">{{item.status}}</div></el-col>
          <el-col :span="4">
            <el-tooltip class="item" effect="light" :content="item.product" placement="right-end" v-if="item.product !== '-'">
              <div class="item-name">{{item.product}}</div>
            </el-tooltip>
            <div class="item-name" v-else>{{item.product}}</div>
          </el-col>
          <el-col :span="5"><div class="">{{item.area_name}}</div></el-col>
          <el-col :span="4"><div class="">{{item.publish_date}}</div></el-col>
          <el-col :span="2"><div class=""><i class="iconfont icon-xingxing1" :class="{collection: item.collect !== 0}" @click="changeCollectionState(index)"></i></div></el-col>
        </el-row>
      </div>
    </div>
    <div class="no-data" v-else>No Data ...</div>
  </div>
</template>

<script>
  import {getUsername} from '../../../../utils/auth'
  export default {
    data() {
      return {
        // propsData: [
        //   {name: '中铁八局二公司物质租赁站-安全防护网', type: '招标公告', region: '北京', time: '2015/05/01', flag: true},
        //   {name: '中铁八局二公司物质租赁站-安全防护网', type: '招标公告', region: '北京', time: '2015/05/01', flag: true},
        //   {name: '中铁八局二公司物质租赁站-安全防护网', type: '招标公告', region: '北京', time: '2015/05/01', flag: true},
        //   {name: '中铁八局二公司物质租赁站-安全防护网', type: '招标公告', region: '北京', time: '2015/05/01', flag: false},
        //   {name: '中铁八局二公司物质租赁站-安全防护网', type: '招标公告', region: '北京', time: '2015/05/01', flag: false},
        //   {name: '中铁八局二公司物质租赁站-安全防护网', type: '招标公告', region: '北京', time: '2015/05/01', flag: false},
        //   {name: '中铁八局二公司物质租赁站-安全防护网', type: '招标公告', region: '北京', time: '2015/05/01', flag: true},
        //   {name: '中铁八局二公司物质租赁站-安全防护网', type: '招标公告', region: '北京', time: '2015/05/01', flag: false},
        //   {name: '中铁八局二公司物质租赁站-安全防护网', type: '招标公告', region: '北京', time: '2015/05/01', flag: false},
        //   {name: '中铁八局二公司物质租赁站-安全防护网', type: '招标公告', region: '北京', time: '2015/05/01', flag: false},
        //   {name: '中铁八局二公司物质租赁站-安全防护网', type: '招标公告', region: '北京', time: '2015/05/01', flag: false},
        // ]
      }
    },
    methods: {
      async changeCollectionState(index) {
        console.log(`点击的第${index}个`)
        let paramsData = this.propsData[index]
        let params = {
          object_id: paramsData.uuid,
          username: getUsername()
        }
        if (this.propsData[index].collect === 0 ) {
          this.propsData[index].collect = 1
          let res = await this.axios.post('collectionBidding/addAndDeleteCollection', params)
          if (res.data.status === 200) {
            this.$message.success('收藏成功');
          } else {
            this.$message.error('收藏失败');
          }
        } else {
          // this.propsData[index].collect是1的情况
          this.propsData[index].collect = 0
          let res = await this.axios.post('collectionBidding/addAndDeleteCollection', params)
          if (res.data.status === 200) {
            this.$message.warning('取消收藏成功');
          } else {
            this.$message.error('取消收藏失败');
          }
        }
        // this.propsData[index].collect = this.propsData[index].collect === 0 ? 1 : 0
        // let paramsData = this.propsData[index]
        // let params = {
        //   bulletin_id: paramsData.uuid,
        //   bulletin_name: paramsData.title,
        //   bulletin_type: paramsData.status,
        //   region: paramsData.area_name,
        //   publish_time: paramsData.publish_date
        // }
        // let res = await this.axios.post('bidding/addAndDeleteCollection', params)
        // console.log('收藏或取消的数据')
        // console.log(res)
        // if (res.data.status === 200) {
        //   this.$message.success('收藏成功');
        // } else {
        //   this.$message.error('收藏失败');
        // }
      },
      // async changeCollectionState(index) {
      //   // console.log(`点击的第${index}个`)
      //   let paramsData = this.propsData[index]
      //   if (this.propsData[index].collect === 0 ) {
      //     this.propsData[index].collect = 1
      //     let params = {
      //       bulletin_id: paramsData.uuid,
      //       bulletin_name: paramsData.title,
      //       bulletin_type: paramsData.status,
      //       region: paramsData.area_name,
      //       publish_time: paramsData.publish_date
      //     }
      //     let res = await this.axios.post('bidding/addAndDeleteCollection', params)
      //     if (res.data.status === 200) {
      //       this.$message.success('收藏成功');
      //     } else {
      //       this.$message.error('收藏失败');
      //     }
      //   } else {
      //     // this.propsData[index].collect是1的情况
      //     this.propsData[index].collect = 0
      //     let res = await this.axios.post('bidding/deleteMyCollection', {bulletin_id: paramsData.uuid})
      //     if (res.data.status === 200) {
      //       this.$message.warning('取消收藏成功');
      //     } else {
      //       this.$message.error('取消收藏失败');
      //     }
      //   }
      //   // this.propsData[index].collect = this.propsData[index].collect === 0 ? 1 : 0
      //   // let paramsData = this.propsData[index]
      //   // let params = {
      //   //   bulletin_id: paramsData.uuid,
      //   //   bulletin_name: paramsData.title,
      //   //   bulletin_type: paramsData.status,
      //   //   region: paramsData.area_name,
      //   //   publish_time: paramsData.publish_date
      //   // }
      //   // let res = await this.axios.post('bidding/addAndDeleteCollection', params)
      //   // console.log('收藏或取消的数据')
      //   // console.log(res)
      //   // if (res.data.status === 200) {
      //   //   this.$message.success('收藏成功');
      //   // } else {
      //   //   this.$message.error('收藏失败');
      //   // }
      // },
      sendDetailName(index) {
        let params = this.propsData[index]
        this.$emit('getDetail', params)
      },
    },
    props: ['propsData'],
  }
</script>

<style lang="scss" scoped>
.bidding-item {
  .bidding-title {
    height: 60px;
    line-height: 60px;
    padding-left: 30px;
    background: rgba(16,142,233,0.12);
    /*font: bold 16px MicorsoftYaHei;*/
    font-weight: bold;
    font-size: 16px;
    font-family: MicorsoftYaHei;
    color: #666;
    .el-col {
      text-align: center;
    }
  }
  .have-data {
    .item-detail {
      line-height: 60px;
      width: 100%;
      padding-left: 20px;
      /*border: 1px solid #333;*/
      font: normal 16px MicorsoftYaHei;
      color: #2f2a72;
      .el-row {
        /*height: 60px;*/
        line-height: 60px;
      }
      .el-col {
        text-align: center;
      }
      &:nth-child(odd) {
        background-color: #fff;
      }
      &:nth-child(even) {
        background-color: #f0f5fa;
      }
      .item-name {
        cursor: pointer;
        /*max-width: 320px;*/
        max-width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .icon-xingxing1 {
        display: inline-block;
        transform: scale(1.5, 1.5);
        padding-left: 5px;
        cursor: pointer;
        color: #b8b8b8;
       /*font-size: 30px;*/
      }
      .collection {
        color: #f0ba00;
      }
    }
  }
  .no-data {
    margin-top: 30px;
    color: #ccc;
    text-align: center;
    font-size: 36px;
  }
}
</style>
